/*  1.html结构尽量不要超过5层
    2.html标签多使用公共类样式，样式的组件化
    3.规定好项目的层级规范
        popout弹出层 90~99
        mask蒙层 70~79
        nav导航层 40~50
        content内容层 0~10 
*/
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
}
body {
	overflow-x: hidden;
}
a {
	font-size: 12px;
}
.cp {
	cursor: pointer;
}
/* 版心 */
.container {
	width: 1200px;
	margin: 0 auto;
}
/* 定位 */
.rel {
	position: relative;
}
.abs {
	position: absolute;
}
.fix {
	position: fixed;
}
.sticky {
	position: sticky;
}
/* 浮动 */
.fl {
	float: left;
}
.fr {
	float: right;
}
.cf::before,
.cf::after {
	content: "";
	display: table;
	clear: both;
}
/* flex布局 */
.flx-row {
	display: flex;
}
.flx-col {
	display: flex;
	flex-direction: column;
}
.align-c {
	align-items: center;
}
.justify-c {
	justify-content: center;
}
/* 盒子类型 */
.b-box {
	box-sizing: border-box;
}
/* 背景颜色 */
.bg-white {
	background-color: white;
}
.bg-blue {
	background-color: #2f7ee9;
}
.bg-theme {
	background-color: #00bdff;
}
.bg-orag {
	background-color: #ed510a;
}
.bg-fbfbfb {
	background-color: #fbfbfb;
}
.bg-fafafa {
	background-color: #fafafa;
}
/* 文字大小 */
.fs-10,
.fs-12 {
	font-size: 12px;
}
.fs-14 {
	font-size: 14px;
}
.fs-16 {
	font-size: 16px;
}
.fs-18 {
	font-size: 18px;
}
.fs-20 {
	font-size: 20px;
}
.fs-22 {
	font-size: 22px;
}
.fs-24 {
	font-size: 24px;
}
.fs-26 {
	font-size: 26px;
}
.fs-28 {
	font-size: 28px;
}
.fs-32 {
	font-size: 32px;
}
.fs-38 {
	font-size: 38px;
}
/* 文字颜色 */
.fc-red {
	color: red;
}
.fc-black {
	color: black;
}
.fc-white {
	color: white;
}
.fc-grey {
	color: #666666;
}
.fc-lightgrey {
	color: #b3b3b3;
}
.fc-555 {
	color: #555555;
}
.fc-777 {
	color: #777777;
}
.fc-999 {
	color: #999999;
}
.fc-theme {
	color: #00bdff;
}
/* 文字加粗 */
.fw-bold {
	font-weight: bold;
}
/* 行内元素居中 */
.text-c {
	text-align: center;
}
/* 行内元素靠左 */
.text-l {
	text-align: left;
}
/* 行内元素靠右 */
.text-r {
	text-align: right;
}
.text-e {
	text-align: end;
}
/* 字符间距 */
.letterS-1 {
	letter-spacing: 1px;
}
/* 行高 */
.lh-82 {
	line-height: 82px;
}
.lh-76 {
	line-height: 76px;
}
.lh-74 {
	line-height: 74px;
}
.lh-66 {
	line-height: 66px;
}
.lh-62 {
	line-height: 62px;
}
.lh-58 {
	line-height: 58px;
}
.lh-54 {
	line-height: 54px;
}
.lh-50 {
	line-height: 50px;
}
.lh-48 {
	line-height: 48px;
}
.lh-44 {
	line-height: 44px;
}
.lh-42 {
	line-height: 42px;
}
.lh-40 {
	line-height: 40px;
}
.lh-38 {
	line-height: 38px;
}
.lh-36 {
	line-height: 36px;
}
.lh-34 {
	line-height: 34px;
}
.lh-32 {
	line-height: 32px;
}
.lh-30 {
	line-height: 30px;
}
.lh-26 {
	line-height: 26px;
}
.lh-24 {
	line-height: 24px;
}
.lh-22 {
	line-height: 22px;
}
.lh-20 {
	line-height: 20px;
}
.lh-18 {
	line-height: 18px;
}
/* 内外边距 */
.mt-110 {
	margin-top: 110px;
}
.mt-100 {
	margin-top: 100px;
}
.mt-80 {
	margin-top: 80px;
}
.mt-50 {
	margin-top: 50px;
}
.mt-45 {
	margin-top: 45px;
}
.mt-30 {
	margin-top: 30px;
}
.mt-25 {
	margin-top: 25px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mb-12 {
	margin-bottom: 12px;
}
.mb-15 {
	margin-bottom: 15px;
}
.mb-20 {
	margin-bottom: 20px;
}
.mb-24 {
	margin-bottom: 24px;
}
.mb-30 {
	margin-bottom: 30px;
}
.mb-40 {
	margin-bottom: 40px;
}
.mb-50 {
	margin-bottom: 50px;
}
.mb-56 {
	margin-bottom: 56px;
}
.ml-22 {
	margin-left: 22px;
}
.ml-20 {
	margin-left: 20px;
}
.mr-10 {
	margin-right: 10px;
}
.mr-12 {
	margin-right: 12px;
}
.pl-5 {
	padding-left: 5px;
}
.pl-10 {
	padding-left: 10px;
}
.pl-20 {
	padding-left: 20px;
}
.pl-128 {
	padding-left: 128px;
}
